<template>
    用户名称：<input type="text" placeholder="请输入用户名称" v-model="name"/>
    联系方式<input type="text" placeholder="请输入联系方式" v-model="phone"/>
    <input type="button" value="查询" @click="Show" />
    <table border="1">
        <thead>
            <tr>
            <td colspan="2" style="text-algin:center;">显示 查询</td>
        </tr>
            <tr>
                <td>名称</td>
                <td>邮箱</td>
                <td>联系方式</td>
                <td>身份证号码</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.idCard}}</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">

    import {onMounted,ref} from 'vue';
    import axios from 'axios';

    //查询 
    const name=ref("");
    const phone=ref("");
    
    //钩子
    onMounted(()=>{
        Show();
    })

    const info=ref([{
         name:"",
         pwd:"",
         email:"",
         phone:"",
         idCard:""
    }])

    const Show=()=>{
        axios.get("https://localhost:7112/api/member/GetMemberBy",
        {
            params:{
                name:name.value,
                phone:phone.value
            }
        })
        .then(res=>{
            info.value=res.data;
        })
        .catch(res=>{
            console.log(res.data);
        })
    }
    
</script>